<%--
  Created by IntelliJ IDEA.
  User: 21775
  Date: 2022/3/31
  Time: 16:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>查找所有用户的信息</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        function changeById() {
            console.log(111);
            var $divs=$("#divId");
            // if(!$divs.hasOwnProperty()) return;
            $divs.css("background","#ffff00");
        }
        function changeByClass() {
            var $divs=$(".divClass");
            for(i=0;i<$divs.length;i++){
                console.log($divs[i].innerText)
            }
            // if(!$divs.hasOwnProperty()) return;
            // for(div in $divs){
            //     $(div).css("background","#0000ff");
            // }
        }
        function changeByLabel() {
            var $divs=$("div");
            $divs.css("background","#00ff00");

            // if(!$divs.hasOwnProperty()) return;
            // for(div in $divs){
            //     $(div).css("background","#00ff00");
            // }
        }
        function funFirst() {
            var $divs=$(".divClass:first");
            $divs.css("background","#0000ff");
        }
        function funLast() {
            var $divs=$(".divClass:last");
            $divs.css("background","#00ff00");
        }
        function funEq() {
            var $divs=$(".divClass:eq(2)");
            $divs.css("background","#00ffff");
        }
        function funLt() {
            var $divs=$(".divClass:lt(7)");
            $divs.css("background","#ff00ff");
        }
        function funGt() {
            var $divs=$(".divClass:gt(4)");
            $divs.css("background","#ffff00");
            changeByClass();
        }

        $(function () {
            $("#btnGt").click(function () {
                var $divs=$(".divClass:gt(4)");
                $divs.css("background","#ffff00");
                changeByClass()
            });
        })
    </script>
    <style type="text/css">
        div{
            background: #ffeeee;
            /*width: 80px;*/
            /*height: 40px;*/
            text-align: center;
            font-size: 20px;
            color: #ff0000;
        }

        .divClass{
            background: #ffeeee;
            /*width: 80px;*/
            /*height: 40px;*/
            text-align: center;
            font-size: 20px;
            color: #ff0000;
        }
    </style>
</head>
<body>
    <div id="divId">id</div>
    <div class="divClass">class1</div>
    <div class="divClass">class2</div>
    <div class="divClass">
        class3
        <div class="divClass">class4</div>
        <div class="divClass">class5</div>
        <div class="divClass">
            class6
            <div class="divClass">class7</div>
            <div class="divClass">class8</div>
        </div>
        <div class="divClass">class9</div>
    </div>
    <div class="divClass">class10</div>
    <div class="divClass">class11</div>
    <div class="divClass">class12</div>
<%--    <input type="button" id="btnId" onclick="changeById()" value="id">--%>
<%--    <input type="button" id="btnClass" onclick="changeByClass()" value="Class">--%>
<%--    <input type="button" id="btnLabel" onclick="changeByLabel()" value="label">--%>
    <input type="button" value="first" onclick="funFirst()">
    <input type="button" value="last" onclick="funLast()">
    <input type="button" value="eq" onclick="funEq()">
    <input type="button" value="lt" onclick="funLt()">
    <input type="button" id="btnGt" value="gt">

</body>
</html>
